<!DOCTYPE html>
<html>
<head>
	<title>login
	</title>
	<meta charset="utf-8">
	<style>
		input {
			outline: none;
			box-sizing: border-box;
		}
		.login-wrapper {
			margin: 0 auto;
			margin-top: 200px;
			padding: 40px;
			border-radius: 14px;
			background: rgb(232,226,226);
			display: flex;
			flex-direction: column;
			width: 340px;
			padding: 20px;
			justify-content: center;
			text-align: center;
		}
		.login-wrapper .content {
			display: none;
		}
		.login-wrapper .content.active {
			display: block;
		}
		.login-wrapper .content input{
			width: 260px;
			height: 40px;
			text-align: center;
			border: 1px solid #008cee;
			display: inline-block;
			margin-top: 10px;
		}
		.content input:last-child {

		}
		.login-wrapper .login-banner {
			width: 260px;
			display: flex;
			margin: 0 auto;
		}
		.login-wrapper .login-banner button {
			width: 50%;
			height: 40px;
			position: relative;
			text-align: center;
			line-height: 40px;
			background: #008cee;
			border: none;
			outline: none;
			font-size: 18px;
			color: white;
			display: inline-block;
			margin: 0 auto;
		}
		.login-banner>button.register {
			border-left: 1px solid rgb(238,238,238);
			box-sizing: border-box;
		}
		.login-banner>button.active {
			
		}
		button.active::before {
			content: "";
			padding: 4px;
			transform: rotate(45deg);
			background: rgb(232,226,226);
			position: absolute;
			bottom: -5.3px;
			left: calc(50% - 2px);
		}
		button.submit {
			width: 260px;
			border: none;
			background: #008cee;
			line-height: 2.2;
			font-size: 16px;
			text-align: center;
			color: white;
			display: inline-block;
			margin: 0 auto;
			margin-top: 20px;
			outline: none;
		}
	</style>
</head>
<body>
	<div class="login-wrapper">
		<div class="login-banner">
			<button type="login" class="login active">sign in</button>
			<button type="register" class="register">register</button>
		</div>
		<div class="content-login content active">
			<input class="username" type="text" placeholder="username">
			<input class="password" type="text" placeholder="password">
		</div>
		<div class="content-register content">
			<input class="uname" type="text" placeholder="username">
			<input class="tel" type="text" placeholder="phonenum">
			<input class="pass" type="text" placeholder="password">
		</div>
		<button class="submit">submit</button>
	</div>
	<script src="src/zepto.js"></script>
	<script>
		var baseURL = "http://localhost:8080?s=";
		var type = "login";
		$(document).ready(function () {
			$(".login-banner").on("click","button", function () {
				var $this = $(this);
				var btnType = $this.attr("type");
				type = btnType;
				$(".login-banner button").removeClass("active");
				$this.addClass("active");

				if (btnType == "login") {

					$(".content-register").removeClass("active");
					$(".content-login").addClass("active");
					
				}else {
					$(".content-register").addClass("active");
					$(".content-login").removeClass("active");
				}
				
			});
			$(".login-wrapper").on("click", ".submit", function () {
				console.log(type);
				if (type == "login") {
					var params = {
						name: $(".username").val(),
						password: $(".password").val()
					};
					$.post(baseURL + "api/login",params, function (response) {
						var result = JSON.parse(response);
						if (result.status==1) {
							alert(result.message);
							window.location.href = "./home.html";
						}else {
							alert(result.message);
						}
					})
				}
				if (type == "register") {
					var params = {
						name: $(".uname").val(),
						phonenum: $(".tel").val(),
						password: $(".pass").val()
					};
					$.post(baseURL + "api/register",params, function (response) {
						var result = JSON.parse(response);
						if (result.status==1) {
							alert(result.message);
							$(".login-banner button").removeClass("active");
							$(".login-banner .login").addClass("active");
							$(".content-register").removeClass("active");
							$(".content-login").addClass("active");
						}else {
							alert(result.message);
						}
					})
				}
			})
		});
	</script>
</body>
</html>